<template>
  <div class="order-logistics-page">
    <div id="map">
      <div v-if="express">
        <div class="title">
          <van-icon name="arrow-left" @click="$router.back()" />
          <span>{{ express.statusValue }}</span>
          <van-icon name="service" />
        </div>
        <div class="current">
          <p class="status">订单{{ express.statusValue }} 预计{{ express.estimatedTime }}送达</p>
          <p class="predict">
            <span>{{ express.name }}</span>
            <span>{{ express.awbNo }}</span>
          </p>
        </div>
      </div>
    </div>

    <div class="logistics" v-if="express">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in express.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Express } from '@/types/medicine'
import { getMedicalOrderLogistics } from '@/api/medicine'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import startIcon from '@/assets/start.png'
import endIcon from '@/assets/end.png'
import carIcon from '@/assets/car.png'

const express = ref<Express>()

const route = useRoute()

const getExpress = async () => {}

onMounted(() => {
  getExpress()
})

// v2.0 需要配置安全密钥jscode
window._AMapSecurityConfig = {
  securityJsCode: 'c87456094f025a638765039c5bbc98a8',
}

onMounted(async () => {
  const { data } = await getMedicalOrderLogistics(route.params.id as string)
  // console.log('物流详情', data)
  express.value = data
  try {
    //回调写法
    // AMapLoader.load({
    //   key: '56df2cea15ebf3d7abeb62d896e87937',
    //   version: '2.0',
    // }).then((AMap) => {
    //   // 使用 Amap 初始化地图
    //   console.log('高德地图api对象', AMap)
    // })

    const AMap = await AMapLoader.load({
      key: '56df2cea15ebf3d7abeb62d896e87937',
      version: '2.0',
    })
    // 使用 Amap 初始化地图
    //console.log('高德地图api对象', AMap)

    const map = new AMap.Map('map', {
      zoom: 12,
      // center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/whitesmoke',
    })
    AMap.plugin('AMap.Driving', async () => {
      const driving = new AMap.Driving({
        map,
        showTraffic: false,
        hideMarkers: true,
      })

      const start = express.value?.logisticsInfo.shift()
      const end = express.value?.logisticsInfo.pop()
      const ways = express.value?.logisticsInfo.map((item: any) => [item.longitude, item.latitude])

      var startMarker = new AMap.Marker({
        position: [start?.longitude, start?.latitude],
        icon: startIcon,
        map: map,
      })

      var endMarker = new AMap.Marker({
        position: [end?.longitude, end?.latitude],
        icon: endIcon,
        map,
      })

      driving.search(
        //longitude |经度   latitude  | 维度
        [start?.longitude, start?.latitude],
        [end?.longitude, end?.latitude],
        {
          waypoints: ways,
        },
        (status: string, result: object) => {
          var currentMarker = new AMap.Marker({
            position: [
              express.value?.currentLocationInfo.longitude,
              express.value?.currentLocationInfo.latitude,
            ],
            icon: endIcon,
            map,
          })
          setTimeout(() => {
            map.setFitView(currentMarker, endMarker)
          })
        },
      )
    })
  } catch (error) {
    console.log(error)
  }
})
</script>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
